<template>
  <el-dialog
    v-model="dialogVisible"
    title="降雨记录详情"
    width="900px"
    :close-on-click-modal="false"
  >
    <div class="detail-container" v-if="detailData">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">基本信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>监测站点：</label>
              <span>{{ detailData.stationName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>降雨日期：</label>
              <span>{{ detailData.rainfallDate }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>记录人：</label>
              <span>{{ detailData.recordPerson }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>开始时间：</label>
              <span>{{ detailData.startTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>结束时间：</label>
              <span>{{ detailData.endTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>持续时长：</label>
              <span>{{ detailData.duration }} 小时</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 降雨数据 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">降雨数据</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>总降雨量：</label>
              <span class="highlight-value">{{ detailData.totalRainfall }} mm</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>最大强度：</label>
              <span class="highlight-value">{{ detailData.maxIntensity }} mm/h</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>降雨类型：</label>
              <el-tag :type="getRainfallTagType(detailData.rainfallType)">
                {{ detailData.rainfallType }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>是否典型：</label>
              <el-tag :type="detailData.isTypical ? 'success' : 'info'">
                {{ detailData.isTypical ? '是' : '否' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>天气状况：</label>
              <span>{{ detailData.weatherCondition }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>平均强度：</label>
              <span>{{ calculateAvgIntensity() }} mm/h</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 气象条件 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">气象条件</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>风向：</label>
              <span>{{ detailData.windDirection || '未记录' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>风速：</label>
              <span>{{ detailData.windSpeed ? `${detailData.windSpeed} m/s` : '未记录' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>气温：</label>
              <span>{{ detailData.temperature ? `${detailData.temperature} ℃` : '未记录' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>湿度：</label>
              <span>{{ detailData.humidity ? `${detailData.humidity} %` : '未记录' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>联系电话：</label>
              <span>{{ detailData.phone || '未记录' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>所属部门：</label>
              <span>{{ detailData.department || '未记录' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 统计分析 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">统计分析</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="analysis-chart">
              <div class="chart-title">降雨强度变化趋势</div>
              <div class="chart-placeholder">
                <el-icon size="48" color="#ccc"><TrendCharts /></el-icon>
                <p>降雨强度随时间变化图表</p>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="analysis-stats">
              <div class="stat-item">
                <div class="stat-label">降雨等级</div>
                <div class="stat-value">{{ getRainfallLevel() }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">危险程度</div>
                <div class="stat-value">{{ getRiskLevel() }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">历史排名</div>
                <div class="stat-value">前 {{ getHistoryRank() }}%</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">影响评估</div>
                <div class="stat-value">{{ getImpactAssessment() }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 备注信息 -->
      <el-card class="detail-card" shadow="never" v-if="detailData.remark">
        <template #header>
          <div class="card-header">
            <span class="card-title">备注信息</span>
          </div>
        </template>
        <div class="remark-content">
          {{ detailData.remark }}
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handlePrint">
          <el-icon><Printer /></el-icon>
          打印报告
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出PDF
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { TrendCharts, Printer, Download } from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  detailData?: any
}

interface Emits {
  (e: 'update:visible', visible: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  detailData: null
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 获取降雨类型标签样式
const getRainfallTagType = (type: string) => {
  const typeMap = {
    '小雨': 'success',
    '中雨': 'primary',
    '大雨': 'warning',
    '暴雨': 'danger',
    '大暴雨': 'danger',
    '特大暴雨': 'danger'
  }
  return typeMap[type] || ''
}

// 计算平均强度
const calculateAvgIntensity = () => {
  if (!props.detailData?.totalRainfall || !props.detailData?.duration) {
    return '0.0'
  }
  const avgIntensity = props.detailData.totalRainfall / props.detailData.duration
  return avgIntensity.toFixed(1)
}

// 获取降雨等级
const getRainfallLevel = () => {
  const rainfall = props.detailData?.totalRainfall || 0
  if (rainfall < 10) return '小雨'
  if (rainfall < 25) return '中雨'
  if (rainfall < 50) return '大雨'
  if (rainfall < 100) return '暴雨'
  if (rainfall < 250) return '大暴雨'
  return '特大暴雨'
}

// 获取风险等级
const getRiskLevel = () => {
  const rainfall = props.detailData?.totalRainfall || 0
  if (rainfall < 25) return '低风险'
  if (rainfall < 50) return '中等风险'
  if (rainfall < 100) return '高风险'
  return '极高风险'
}

// 获取历史排名
const getHistoryRank = () => {
  const rainfall = props.detailData?.totalRainfall || 0
  if (rainfall < 25) return '80'
  if (rainfall < 50) return '60'
  if (rainfall < 100) return '30'
  return '10'
}

// 获取影响评估
const getImpactAssessment = () => {
  const rainfall = props.detailData?.totalRainfall || 0
  if (rainfall < 25) return '轻微影响'
  if (rainfall < 50) return '一般影响'
  if (rainfall < 100) return '较大影响'
  return '严重影响'
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 打印报告
const handlePrint = () => {
  window.print()
  ElMessage.success('正在准备打印...')
}

// 导出PDF
const handleExport = () => {
  // 模拟导出功能
  ElMessage.success('正在导出PDF...')
}
</script>

<style scoped>
.detail-container {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.detail-item label {
  font-weight: bold;
  color: #666;
  min-width: 80px;
  margin-right: 10px;
}

.detail-item span {
  color: #333;
}

.highlight-value {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

.analysis-chart {
  height: 200px;
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.chart-title {
  padding: 10px;
  background: #f5f7fa;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  text-align: center;
}

.chart-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.analysis-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  height: 200px;
  align-content: center;
}

.stat-item {
  text-align: center;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fafafa;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.remark-content {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 4px;
  line-height: 1.6;
  color: #666;
}

.dialog-footer {
  text-align: right;
}

/* 打印样式 */
@media print {
  .dialog-footer {
    display: none;
  }
  
  .detail-container {
    max-height: none;
    overflow: visible;
  }
}
</style>